<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>学生主页 - 数据库教学系统</title>
  <link rel="stylesheet" href="/src/style.css">
  <link rel="stylesheet" href="/node_modules/@fortawesome/fontawesome-free/css/all.min.css">
</head>
<body class="bg-gray-50">
  <div class="min-h-screen flex">
    <!-- 侧边栏 -->
    <aside class="w-64 bg-white shadow-md">
      <div class="p-4 border-b border-gray-200">
        <h2 class="text-xl font-bold text-gray-800">数据库教学系统</h2>
      </div>
      <nav class="p-4 space-y-2">
        <a href="/student/dashboard.html" class="nav-item active flex items-center">
          <i class="fas fa-home mr-3"></i>我的课程
        </a>
        <a href="/student/lab.html" class="nav-item flex items-center">
          <i class="fas fa-flask mr-3"></i>实验环境
        </a>
        <a href="/student/assignments.html" class="nav-item flex items-center">
          <i class="fas fa-tasks mr-3"></i>作业管理
        </a>
        <a href="/student/profile.html" class="nav-item flex items-center">
          <i class="fas fa-user mr-3"></i>个人资料
        </a>
      </nav>
    </aside>

    <!-- 主要内容区 -->
    <main class="flex-1 p-8">
      <div class="flex justify-between items-center mb-8">
        <h1 class="text-2xl font-bold text-gray-800">欢迎回来，李同学</h1>
        <div class="flex items-center space-x-4">
          <button class="btn btn-secondary">
            <i class="fas fa-bell mr-2"></i>
            <span class="bg-red-500 text-white text-xs rounded-full px-2 py-1">2</span>
          </button>
          <div class="flex items-center space-x-2">
            <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" 
                 alt="用户头像" 
                 class="w-10 h-10 rounded-full">
            <span class="text-gray-700">李同学</span>
          </div>
        </div>
      </div>

      <!-- 学习进度 -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div class="card bg-blue-50 border-l-4 border-primary">
          <div class="flex items-center">
            <div class="p-3 bg-primary rounded-lg">
              <i class="fas fa-book text-white text-xl"></i>
            </div>
            <div class="ml-4">
              <h3 class="text-gray-600 text-sm">已选课程</h3>
              <p class="text-2xl font-bold text-gray-800">3</p>
            </div>
          </div>
        </div>

        <div class="card bg-green-50 border-l-4 border-success">
          <div class="flex items-center">
            <div class="p-3 bg-success rounded-lg">
              <i class="fas fa-tasks text-white text-xl"></i>
            </div>
            <div class="ml-4">
              <h3 class="text-gray-600 text-sm">待交作业</h3>
              <p class="text-2xl font-bold text-gray-800">2</p>
            </div>
          </div>
        </div>

        <div class="card bg-yellow-50 border-l-4 border-warning">
          <div class="flex items-center">
            <div class="p-3 bg-warning rounded-lg">
              <i class="fas fa-flask text-white text-xl"></i>
            </div>
            <div class="ml-4">
              <h3 class="text-gray-600 text-sm">实验进度</h3>
              <p class="text-2xl font-bold text-gray-800">75%</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 我的课程 -->
      <div class="card">
        <h2 class="text-xl font-bold text-gray-800 mb-6">我的课程</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <!-- 课程卡片 -->
          <div class="bg-white rounded-lg shadow-sm overflow-hidden border border-gray-200">
            <img src="https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&h=200&q=80" 
                 alt="课程封面" 
                 class="w-full h-40 object-cover">
            <div class="p-4">
              <h3 class="text-lg font-semibold text-gray-800 mb-2">数据库设计</h3>
              <p class="text-sm text-gray-600 mb-4">张教授 · 周四 10:00-11:40</p>
              <div class="flex justify-between items-center">
                <span class="text-sm text-gray-500">进度：12/16周</span>
                <button class="btn btn-primary">进入学习</button>
              </div>
            </div>
          </div>

          <div class="bg-white rounded-lg shadow-sm overflow-hidden border border-gray-200">
            <img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&h=200&q=80" 
                 alt="课程封面" 
                 class="w-full h-40 object-cover">
            <div class="p-4">
              <h3 class="text-lg font-semibold text-gray-800 mb-2">数据库系统概论</h3>
              <p class="text-sm text-gray-600 mb-4">李教授 · 周二 14:00-15:40</p>
              <div class="flex justify-between items-center">
                <span class="text-sm text-gray-500">进度：11/16周</span>
                <button class="btn btn-primary">进入学习</button>
              </div>
            </div>
          </div>

          <div class="bg-white rounded-lg shadow-sm overflow-hidden border border-gray-200">
            <img src="https://images.unsplash.com/photo-1504384308090-c894fdcc538d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&h=200&q=80" 
                 alt="课程封面" 
                 class="w-full h-40 object-cover">
            <div class="p-4">
              <h3 class="text-lg font-semibold text-gray-800 mb-2">数据库优化与管理</h3>
              <p class="text-sm text-gray-600 mb-4">王教授 · 周五 08:00-09:40</p>
              <div class="flex justify-between items-center">
                <span class="text-sm text-gray-500">进度：10/16周</span>
                <button class="btn btn-primary">进入学习</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</body>
</html>